<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div id="ball"></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    window.viewer = null;
    return {
      PlotDraw: null,
    };
  },
  mounted() {
    this.createballFn();
  },
  methods: {
    // 创建地球
    createballFn() {
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
        90,
        -20,
        110,
        90
      );
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1YzRhOGE5YS0yOWM3LTQ4NWYtOWMwYi0zNjU5OTJjZjA1ZjYiLCJpZCI6NTQxMzUsImlhdCI6MTYxOTU5Mzg3Mn0.gma-xUFLKsltb3ijWbpUh6E9ca1rGcg9Oh_hOUu2ZTc";
      this.ballObj = new Cesium.Viewer("ball", {
        animation: true, //是否创建动画小器件，左下角仪表
        shouldAnimate: true,
        baseLayerPicker: false, //是否显示图层选择器
        fullscreenButton: false, //是否显示全屏按钮
        geocoder: false, //是否显示geocoder小器件，右上角查询按钮
        homeButton: true, //是否显示Home按钮
        infoBox: false, //是否显示信息框
        sceneModePicker: false, //是否显示3D/2D选择器
        selectionIndicator: false, //是否显示选取指示器组件
        timeline: true, //是否显示时间轴
        navigationHelpButton: false, //是否显示右上角的帮助按钮
        scene3DOnly: false, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
      });
      // 放入全局
      viewer = this.ballObj;
      //隐藏底部logo
      this.ballObj._cesiumWidget._creditContainer.style.display = "none";
      //移除默认的双击事件
      this.ballObj.cesiumWidget.screenSpaceEventHandler.removeInputAction(
        Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
      );
      // //增加14级图层清晰
      // this.ballObj.imageryLayers.addImageryProvider(
      //   new Cesium.IonImageryProvider({ assetId: 3954 })
      // );
      // //增加房屋3d效果
      // this.ballObj.scene.primitives.add(
      //   new Cesium.Cesium3DTileset({
      //     url: Cesium.IonResource.fromAssetId(354307),
      //   })
      // );
      // //   激活基于太阳位置的光照：
      // this.ballObj.scene.globe.enableLighting = true;
      //  this.$refs.measure.init(this.ballObj)
      // 军标
      // this.plotDraw = new PlotDraw(viewer);
      // this.militaryPlotLayer = new MilitaryPlotLayer(viewer);
      // //可以以json字符串的方式存储到数据库 从数据库获取后添加到图层 具体如何存储 取决于自己 （构造一个标绘对象需要哪些参数 就保存哪些参数即可）
      // let data = [
      //   '{"plotCode":"202151794751901","baseInfo":{"points":[[63.808355365179914,58.58519035165309],[76.02493157194425,58.781098058087196]],"height":493.448988668378,"plotName":"finearrow","plotCode":"202151794751901"},"properties":{}}',
      //   '{"plotCode":"202151710245423","baseInfo":{"points":[[66.96603924513202,52.10136720484367],[68.80781304617273,47.231377634862454],[73.29992725019603,48.83610783442159]],"height":-981.3165109959799,"plotName":"sector","plotCode":"202151710245423"},"properties":{}}',
      // ];

      // this.militaryPlotLayer.initPlots(data);

      // this.plotDraw.PlotDrawEndEvent.addEventListener((drawPlot, type) => {
      //   drawPlot.remove(); //移除绘制的对象
      //   //绘制结束 如果需要保存到数据库中 保存成功后再添加到图层中显示
      //   let plot = this.militaryPlotLayer.addPlot(drawPlot); //将标绘对象添加到图层中进行管理
      // });
    },
  },
};
</script>

<style scoped lang="scss">
#ball {
  width: 100%;
  height: 100%;
}
</style>
